<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Template Documentation Template</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
    .style1 {color: #0000FF}
    .added1 {	background-color: #336600;
	color: #FFFFFF;
}
    </style>
 
	<!-- Syntax Highlighter -->
	<link rel="stylesheet" type="text/css" href="syntax-highlighter/styles/shCore.css" media="all">
	<link rel="stylesheet" type="text/css" href="syntax-highlighter/styles/shThemeDefault.css" media="all">    
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;LightHouse&rdquo; Documentation by &ldquo;TemplateSquare&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;LightHouse&rdquo;</h1>
		
  <div class="borderTop">
			<div class="span-6 colborder info prepend-1">
			  <p class="prepend-top">
			    <strong>
					Created: 03/17/2011<br>
				By: <a href="http://themeforest.net/user/templatesquare">TemplateSquare</a><br>
				<br>
			    </strong><strong><br>
		        </strong> </p>
    </div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://themeforest.net/user/templatesquare">here</a>. Thanks so much!</p>
			</div>
	  </div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#temp-components">Template Components</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#psdFiles">PSD Files</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
			
			<li><a href="#php">PHP Code Explanation</a> <em class="quiet small">(If your theme uses PHP)</em></li>
			<li><a href="#">Flash</a>  <em class="quiet small">(If your theme uses Flash)</em></li>
			<li><a href="#">API Usage</a> <em class="quiet small">(If your theme uses an API)</em></li>
			<li><a href="#">Any additional unique features that need an overview</a></li>
		</ol>
		
		<hr>
		
		<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
		<p>Below is the general HTML structure of the landing page. </p>
<h4 id="front-html-structures"><strong>1) Front Page HTML Structure</strong> - <a href="#toc">top</a></h4>
	  <p>The front page's layout consist of top container that show the logo and the main menu, content container that show the slider and main content and bottom container that show the footer area.</p>
        
       	    <pre class="brush: html;" id="front-html-structure-pre">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
 &lt;head&gt;
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
 &lt;title&gt;[.. page title ..]&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id=&quot;top-container&quot;&gt;
	&lt;div class=&quot;centercolumn&quot;&gt;
		&lt;div id=&quot;header&quot;&gt;
			&lt;div id=&quot;logo&quot;&gt;
				[.. contains an anchor tag for the logo link  ..]
			&lt;/div&gt;&lt;!-- end #logo --&gt;
			&lt;div id=&quot;navigation&quot;&gt;
			&lt;ul id=&quot;nav&quot; class=&quot;sf-menu&quot;&gt;
				[.. containes all menu's list items and sub lists..]
			&lt;/ul&gt;
			&lt;/div&gt;&lt;!-- end #navigation--&gt;
			&lt;div class=&quot;clr&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;&lt;!-- end #header --&gt;
	&lt;/div&gt;&lt;!-- end #centercolumn --&gt;
&lt;/div&gt;&lt;!-- end #top-container --&gt;


&lt;div class=&quot;centercolumn&quot;&gt;
&lt;!-- BEGIN SLIDE --&gt;
	&lt;div id=&quot;slider_container&quot;&gt;
		&lt;div id=&quot;slideshow_navigation&quot;&gt;
		&lt;div id=&quot;pager&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;&lt;!-- end slideshow navigation --&gt;
		&lt;div id=&quot;slideshow&quot;&gt; 
				[.. contains the slider items ..]
		&lt;/div&gt;&lt;!-- end #slideshow --&gt;
	&lt;/div&gt;&lt;!-- end #slide --&gt;
&lt;!-- END OF SLIDE --&gt;

	&lt;div id=&quot;maincontent&quot;&gt;
		&lt;div id=&quot;content&quot; class=&quot;full&quot;&gt;
			[.. contains all the page content ..]
		&lt;/div&gt;&lt;!-- end #content --&gt;
		&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;&lt;!-- end #maincontent --&gt;
&lt;/div&gt;&lt;!-- end #centercolumn --&gt;


&lt;div id=&quot;bottom-container&quot;&gt;
&lt;div class=&quot;centercolumn&quot;&gt;
	&lt;div id=&quot;footer&quot;&gt;
		&lt;div id=&quot;footer-left&quot;&gt;
			&lt;div class=&quot;one_fourth&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
			&lt;div class=&quot;one_fourth&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
			&lt;div class=&quot;one_fourth&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
			&lt;div class=&quot;one_fourth last&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
		&lt;/div&gt;&lt;!-- end #footer-left --&gt;
		&lt;div id=&quot;footer-right&quot;&gt;
			[.. contains  footer widget..]
		&lt;/div&gt;&lt;!-- end #footer-right --&gt;
	&lt;/div&gt;&lt;!-- end #footer --&gt;
	&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
	&lt;div id=&quot;copyright&quot;&gt;[.. contains copyright your company..]&lt;/div&gt;
	&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!-- end #centercolumn --&gt;
&lt;/div&gt;&lt;!-- end #bottom-container --&gt;
&lt;/body&gt;	
&lt;/html&gt;

</pre>
            <hr>
		<h4 id="inner-html-structures"><strong>2) Inner Pages HTML Structure</strong> - <a href="#toc">top</a></h4>
		<p>The inner pages HTML structure is very similar to the front page one except that some elements are not needed for inner pages.</p>
		<pre class="brush: html;" id="inner-html-structure-pre">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
&lt;title&gt;[.. page title ..]&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;top-container&quot;&gt;
	&lt;div class=&quot;centercolumn&quot;&gt;
		&lt;div id=&quot;header&quot;&gt;
			&lt;div id=&quot;logo&quot;&gt;
				[.. contains an anchor tag for the logo link  ..]
			&lt;/div&gt;&lt;!-- end #logo --&gt;
			&lt;div id=&quot;navigation&quot;&gt;
			&lt;ul id=&quot;nav&quot; class=&quot;sf-menu&quot;&gt;
				[.. containes all menu's list items and sub lists..]
			&lt;/ul&gt;
			&lt;/div&gt;&lt;!-- end #navigation--&gt;
			&lt;div class=&quot;clr&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;&lt;!-- end #header --&gt;
	&lt;/div&gt;&lt;!-- end #centercolumn --&gt;
&lt;/div&gt;&lt;!-- end #top-container --&gt;

&lt;div class=&quot;centercolumn&quot;&gt;
	&lt;div id=&quot;maincontent&quot;&gt;
		&lt;div id=&quot;content&quot;&gt;
		 	[.. contains all the page content ..]
		&lt;/div&gt;&lt;!-- end #content --&gt;
    
		&lt;div class=&quot;sidebar_right&quot;&gt;
			&lt;div class=&quot;sidebar&quot;&gt;
			 	[.. containes sidebar widgets ..]
			&lt;/div&gt;&lt;!-- end #sidebar --&gt;
		&lt;/div&gt;&lt;!-- end #sidebar_right --&gt;
  
  		&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;&lt;!-- end #maincontent --&gt;
&lt;/div&gt;&lt;!-- end #centercolumn --&gt;
	
&lt;div id=&quot;bottom-container&quot;&gt;
&lt;div class=&quot;centercolumn&quot;&gt;
	&lt;div id=&quot;footer&quot;&gt;
		&lt;div id=&quot;footer-left&quot;&gt;
			&lt;div class=&quot;one_fourth&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
			&lt;div class=&quot;one_fourth&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
			&lt;div class=&quot;one_fourth&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
			&lt;div class=&quot;one_fourth last&quot;&gt;
				[.. contains  footer widget..]
			&lt;/div&gt;&lt;!-- end #one_fourth --&gt;
		&lt;/div&gt;&lt;!-- end #footer-left --&gt;
		&lt;div id=&quot;footer-right&quot;&gt;
			[.. contains  footer widget..]
		&lt;/div&gt;&lt;!-- end #footer-right --&gt;
	&lt;/div&gt;&lt;!-- end #footer --&gt;
	&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
	&lt;div id=&quot;copyright&quot;&gt;[.. contains copyright your company..]&lt;/div&gt;
	&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!-- end #centercolumn --&gt;
&lt;/div&gt;&lt;!-- end #bottom-container --&gt;
&lt;/body&gt;	
&lt;/html&gt;



</pre>
        <hr>

		<h3 id="temp-components"><strong>B) Template Components</strong> - <a href="#toc">top</a></h3>

<h4 id="slider"><strong>1) Slider</strong> - <a href="#toc">top</a></h4>

        <h5>Default slide</h5>
		<p>The home page slider is powered by <a href="http://jquery.malsup.com/cycle/">Cycle</a>.   The slider code is placed after the navigation. note that the slide   image must be 518px × 360px. Please stick to the original size otherwise   it may result in layout errors.</p>
<p>Replace the [.. the slider items ..] with the slider items</p>
<pre class="brush: html; highlight: [7];">
&lt;!-- BEGIN SLIDE --&gt;
	&lt;div id=&quot;slider_container&quot;&gt;
		&lt;div id=&quot;slideshow_navigation&quot;&gt;
		&lt;div id=&quot;pager&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;&lt;!-- end slideshow navigation --&gt;
		&lt;div id=&quot;slideshow&quot;&gt; 
			[.. the slider items ..]
		&lt;/div&gt;&lt;!-- end #slideshow --&gt;
	&lt;/div&gt;&lt;!-- end #slide --&gt;
&lt;!-- END OF SLIDE --&gt;
</pre><br>

<p>the slider items</p>

<pre class="brush: xml;" id="piecemaker-xml">
&lt;div class=&quot;cycle&quot;&gt;
	&lt;img src=&quot;[.. full url to the slide image (518px × 360px) ..]&quot; alt=&quot;&quot; /&gt;
	&lt;div class=&quot;farme-slide-text&quot;&gt;
		&lt;ul class=&quot;slide-text&quot;&gt;
			&lt;li&gt;&lt;span class=&quot;left&quot;&gt;Property Type:&lt;/span&gt;	Modern Home&lt;/li&gt;
			&lt;li&gt;&lt;span class=&quot;left&quot;&gt;Address:&lt;/span&gt;	Woodland Park, NJ 75412&lt;/li&gt;
			&lt;li&gt;&lt;span class=&quot;left&quot;&gt;House Size:&lt;/span&gt;	1,715 Sq Ft&lt;/li&gt;
			&lt;li&gt;&lt;span class=&quot;left&quot;&gt;Year Built:&lt;/span&gt;	2011&lt;/li&gt;
			&lt;li&gt;&lt;span class=&quot;left&quot;&gt;Baths:&lt;/span&gt;	3 Bath&lt;/li&gt;
			&lt;li&gt;&lt;span class=&quot;left&quot;&gt;Beds:&lt;/span&gt;	2 Bed&lt;/li&gt;
		&lt;/ul&gt;
		&lt;div class=&quot;frame-price&quot;&gt;
			&lt;div class=&quot;slider-button&quot;&gt;&lt;a href=&quot;#&quot;&gt;more info&lt;/a&gt;&lt;/div&gt;
			&lt;div class=&quot;slider-price&quot;&gt;$ 2,800,000&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;&lt;!-- end cycle --&gt;
</pre><br>

      
<br>
    <hr>
<h4 id="portfolio"><strong>2) Portfolio</strong> - <a href="#toc">top</a></h4>
		<p>The portfolio page. note that the portfolio must be 220px × 119px. Please stick to the original size otherwise it may result in layout errors.</p>


        <h5>Portfolio</h5>
        <p>Replace the [.. content ..] with the portfolio four content</p>
<pre class="brush: html; html; highlight: [2];">
	&lt;ul id=&quot;pf-type4&quot;&gt;
		[.. content ..]
	&lt;/ul&gt;
</pre><br>
       
<p>Portfolio four content</p>
<pre class="brush: html;">
&lt;li class=&quot;[.. enter 'nomargin' at every fourth li ..]&quot;&gt;
	&lt;div class=&quot;pf-img-type4&quot;&gt;
	&lt;a href=&quot;[.. full path to image large ..]&quot; class=&quot;image&quot; rel=&quot;prettyPhoto[mixed]&quot;&gt;&lt;img src=&quot;[.. full path to image thumbnail, must be 220px × 119px  ..]&quot; alt=&quot;&quot; class=&quot;fade&quot; /&gt;&lt;/a&gt;
    &lt;/div&gt;
	&lt;div class=&quot;pf-text-type4&quot;&gt;
	&lt;h2&gt;[.. portfolio title ..] &lt;/h2&gt;
	&lt;p&gt;[.. portfolio description ..]&lt;br /&gt;
	&lt;a href=&quot;#&quot;&gt;Read More...&lt;/a&gt;&lt;/p&gt;
	&lt;/div&gt;
&lt;/li&gt;
</pre><br>
	   
	  <hr>
<h4 id="blog"><strong>3) Blog Layout</strong> - <a href="#toc">top</a></h4>
<h5 id="blog-page"><strong> Blog Page</strong> - <a href="#toc">top</a></h5>
		<p>To add a blog page, in the content div add the code below and fill it in with the desired content. Please remain the ids and classes names as it is and stick to the right image size to save the look and the layout. Copy/Past the code to add more posts</p>
		<p>Replace the [.. content ..] with the blog post code</p>
<pre class="brush: html; highlight: [6];">
&lt;div class=&quot;centercolumn&quot;&gt;
	&lt;div id=&quot;maincontent&quot;&gt;
		&lt;div id=&quot;content&quot;&gt;
		&lt;ul class=&quot;two_column&quot;&gt;
			&lt;li class=&quot;[.. enter 'nomargin' at every two li ..]&quot;&gt;
				[.. content ..]
			&lt;/li&gt;
		&lt;/ul&gt;
		&lt;/div&lt;!-- end #content --&gt;
		
		&lt;div class=&quot;sidebar_right&quot;&gt;
			&lt;div class=&quot;sidebar&quot;&gt;
			 	[.. containes sidebar widgets ..]
			&lt;/div&gt;&lt;!-- end #sidebar --&gt;
		&lt;/div&gt;&lt;!-- end #sidebar_right --&gt;
  
  		&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;&lt;!-- end #maincontent --&gt;
&lt;/div&gt;&lt;!-- end #centercolumn --&gt;

</pre><br>
		
	
		<p>The blog post code</p>
<pre class="brush: html;">
&lt;div class=&quot;post&quot;&gt;
	&lt;h2 class=&quot;posttitle&quot;&gt;&lt;a href=&quot;[.. post permalink ..]&quot;&gt;[.. post title ..]&lt;/a&gt; &lt;/h2&gt;
	&lt;div class=&quot;entry-utility&quot;&gt;[.. entry utility post ..] &lt;/div&gt;	
	&lt;div class=&quot;entry&quot;&gt;
		&lt;img src=&quot;[.. post thumbnail url 290px &times; 91px ..]&quot; alt=&quot;&quot; /&gt;
		&lt;p&gt;[.. post content ..]  &lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;&lt;!-- end post --&gt;
</pre>
<p>&nbsp;</p>
	  <hr>
		<h3 id="cssFiles"><strong>C) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>

	    <p>These are the css files:<br>
	    1) style.css (used for all pages, this is the general css file.)
	    <br>
		2) inner.css (The css is used for styling the inner page.)<br>
		3)  prettyPhoto.css (The css is used for styling the prettyPhoto lightbox. )
		<br>

	  </p>
	  
<p>&nbsp;</p>
	  <hr>
		
		<h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme use these Javascript files:</p>
		
		<ol>
		  <li>jQuery<br>
		    jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:
		    <pre>
DD_belatedPNG.js 	
PT_Sans_400.font.js 
compressed.js 
contact.js 	
cufon-yui.js 	
fade.js 	
hoverIntent.js 	
jquery-1.4.2.min.js 	
jquery.cycle.all.min.js	
jquery.prettyPhoto.js 
script.js 	
superfish.js 	
supersubs.js 
</pre>
		    No need to edit the js files.
		    <br>
            <br>
		  </li>
	  </ol>
		
<hr>
		
		<h3 id="psdFiles"><strong>E) PSD Files</strong> - <a href="#toc">top</a></h3>
		
		<p>There are  PSDs inside the &quot;psd/&quot; folder.</p>
		<p>Fonts are PT Sans and Verdana.</p>
		<hr>
		
		<h3 id="credits"><strong>F) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
	    <p>
		 Jquery Cycle from <a href="http://jquery.malsup.com/cycle/">malsup</a><br>
		 Jquery prettyPhoto from <a href="http://www.no-margin-for-errors.com/">no-margin-for-errors</a><br>
		 Cufon from <a href="http://cufon.shoqolate.com/generate/">cufon shoqolate</a><br>
	  </p>
<hr>
        <h3 id="php"><strong>G) PHP Code Explanation </strong> - <a href="#toc">top</a></h3>
        <p>There are only one php code for contact page which is process.php, open this file and change the email and subject on line 2 and line 3.
         No need to edit other code unless you really want to.
  <hr>
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>TemplateSquare</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div>
<!-- end div .container -->
	<script type="text/javascript" src="syntax-highlighter/scripts/shCore.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushXml.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushCss.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushJScript.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushPhp.js"></script> 
	<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
</body>
</html>